// 柱状图配置参数
const title = {
    text: '',
    textStyle: {
        color: '#fff',
        fontSize: 16,
        fontWeight: 300
    }
};
const tooltip = {
    trigger: 'axis',
    axisPointer: {
        type: 'shadow'
    }
};
const legend = {
    show: true,
    // orient: 'vertical', vertical 纵向排列 default 横向
    data: [],
    x: 'right',
    textStyle: {
        color: '#fff'
    }
};
const axisLine = {
    // x轴线的颜色以及宽度
    show: true,
    name: '单位: 个',
    nameTextStyle: {
        color: '#fff'
    },
    lineStyle: {
        color: '#fff',
        width: 1,
        type: 'solid'
    }
};
const axisLabel = {
    // x轴文字的配置
    show: true,
    textStyle: {
        color: '#fff',
        margin: 15
    }
};
const splitLine = {
    // 分割线配置
    show: true,
    lineStyle: {
        color: '#fff',
        width: 1,
        type: 'solid'
    }
};
const color = ['#00eddd', '#facb03'];
// 执行计划配色
const doPlanColor = ['#00eddd', '#facb03', '#50a8ff', '#ff5a5a'];
// 质控点
const qcColor = [
    '#2b8ef3',
    '#00d2d2',
    '#1940de',
    '#1294dd',
    '#002f75',
    '#0b4bb3',
    '#00d898'
];
export const dataZoom = [
    {
        show: true,
        realtime: true,
        startValue: 0,
        endValue: 4,
        xAxisIndex: [0],
        textStyle: {
            color: '#091a43'
        }
    },
    {
        type: 'inside'

    }
];
export const grid = {
    // left: '5%',
    // right: '5%',
    // top: '20%',
    bottom: '25%',
    show: true
};
const yAxisLine = {
    // y轴线的颜色以及宽度
    show: true,
    name: '单位: 个',
    nameTextStyle: {
        color: '#fff'
    },
    lineStyle: {
        color: '#fff',
        width: 1,
        type: 'solid'
    }
};
const barOption = {
    title,
    tooltip,
    legend,
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            data: [],
            axisLine,
            axisLabel,
            splitLine
        }
    ],
    yAxis: [
        {
            type: 'value',
            axisLine: yAxisLine,
            axisLabel
        }
    ],
    color,
    series: []
};
const clinicalChangeOption = {
    title,
    tooltip,
    legend,
    xAxis: [
        {
            type: 'category',
            data: [],
            axisLine,
            axisLabel: {
                ...axisLabel,
                interval: 0,
                rotate: 30
            },
            splitLine,
            axisPointer: {
                type: 'shadow'
            }
        }
    ],
    yAxis: [
        {
            type: 'value',
            name: '单位/%',
            min: 0,
            max: 100,
            interval: 10,
            axisLine: yAxisLine,
            axisLabel: {
                formatter: '{value} %'
            }
        }
    ],
    color,
    series: []
};
const doPlanOption = {
    title,
    legend,
    tooltip,
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            data: [],
            axisLine,
            axisLabel,
            splitLine
        }
    ],
    yAxis: [
        {
            type: 'value',
            axisLine: yAxisLine,
            axisLabel
        }
    ],
    color: doPlanColor,
    series: []
};
const qcPointOption = {
    title,
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
        ...legend
    },
    color: qcColor,
    series: [
        {
            name: '完成情况',
            type: 'pie',
            selectedMode: 'single',
            radius: [0, '40%'],
            label: {
                position: 'inner',
                fontSize: 14
            },
            labelLine: {
                show: false
            },
            data: []
        },
        {
            name: '完成情况',
            type: 'pie',
            radius: ['45%', '60%'],
            labelLine: {
                length: 30
            },
            label: {
                formatter:
                    '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c|{c}}    {e|采集占比：} {per|{d}%}  ',
                backgroundColor: 'rgb(8,37,87)',
                // borderColor: '#8C8D8E',
                borderWidth: 1,
                borderRadius: 0,
                rich: {
                    a: {
                        color: '#fff',
                        lineHeight: 30,
                        align: 'center'
                    },
                    hr: {
                        borderColor: '#1a5ba8',
                        width: '100%',
                        borderWidth: 0.5,
                        height: 0
                    },
                    b: {
                        color: '#fff',
                        fontSize: 16,
                        lineHeight: 45
                    },
                    c: {
                        color: '#fff',
                        fontSize: 16,
                        fontWeight: 'bold'
                    },
                    e: {
                        color: '#fff',
                        fontSize: 16
                    },
                    per: {
                        color: 'red',
                        // backgroundColor: '#4C5058',
                        fontSize: 17,
                        fontWeight: 'bold',
                        padding: [3, 4]
                        // borderRadius: 4
                    }
                }
            },
            data: []
        }
    ]
};

// 下载文件通用方法
const downloadFile = (res, file) => {
    //   文件下载
    const url = window.URL.createObjectURL(new Blob([res]));
    const elementA = document.createElement('a');
    elementA.style.display = 'none';
    const fileName = `${file.name}${file.fileType}`;
    elementA.href = url;
    elementA.setAttribute('download', fileName);
    document.body.appendChild(elementA);
    elementA.click();
    document.body.removeChild(elementA);
    window.URL.revokeObjectURL(url);
};
// 报告类型组
const reportTypeOption = [
    {
        label: '学校总体诊改报告',
        value: 'BG_ZT'
    },
    {
        label: '层面诊改报告',
        value: 'BG_LEVEL_XX'
    },
    {
        label: '教学单位诊改报告',
        value: 'BG_JXDW'
    },
    {
        label: '专业层诊改报告',
        value: 'BG_LEVEL_ZY'
    },
    {
        label: '课程层诊改报告',
        value: 'BG_LEVEL_KC'
    },
    {
        label: '教师层诊改报告',
        value: 'BG_LEVEL_JS'
    },
    {
        label: '学生层诊改报告',
        value: 'BG_LEVEL_XS'
    }
]
// echart动态加载动画
const load = myChart => {
    myChart.showLoading({
        text: 'loading',
        color: '#409eff',
        textColor: '#409eff',
        maskColor: 'rgba(255, 255, 255, 0.2)',
        zlevel: 0
    });
}
const totalEle = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#409eff;"></span>'
// 格式化echart值的单位
const formatVal = (params, text) => {
    return `${params[0].name}<br>
    ${params[0].marker}
    ${params[0].seriesName}
    ${params[0].data}${text}<br>
    ${params[1].marker}
    ${params[1].seriesName}
    ${params[1].data}${text}`;
}
// 格式化axisLabel
const formatterAxisLabel = (params) => {
    var newParamsName = ''; // 最终拼接成的字符串
    var paramsNameNumber = params.length; // 实际标签的个数
    var provideNumber = 7; // 每行能显示的字的个数
    // 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
    if (paramsNameNumber > provideNumber) {
        // ********重点在这里********
        newParamsName = params.substring(0, 7) + '...'; // 最终拼成的字符串
    } else {
        // 将旧标签的值赋给新标签
        newParamsName = params;
    }
    // 将最终的字符串返回
    return newParamsName;
}
const common = {
    barOption,
    clinicalChangeOption,
    doPlanOption,
    qcPointOption,
    downloadFile,
    reportTypeOption,
    load,
    totalEle,
    formatVal,
    formatterAxisLabel
};
// 通用common
export default common;
